<template>
  <div>
    <PubSearchHead />
    <el-table :data="tableData">
      <el-table-column
        show-overflow-tooltip
        prop="id"
        label="产品ID"
        width="80"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="itemCatId"
        label="产品关联ID"
        width="100"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="paramData" label="规格参数">
        <template slot-scope="scope">
          <ul>
            <li
              v-for="(item, index) in JSON.parse(scope.row.paramData)"
              :key="index"
            >
              {{ item.value }}
              <ol style="margin-left: 20px">
                <li
                  v-for="(childItem, childIndex) in item.children"
                  :key="childIndex"
                >
                  {{ childItem.childValue }}
                </li>
              </ol>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleParamsDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加规格参数"
      :visible.sync="dialogParamsVisible"
      width="60%"
      :before-close="handleClose"
    >
      <PubTree @onTree="getTreeData" />
      <el-dialog
        width="60%"
        title="书写规格参数"
        :visible.sync="dialogParamsAddVisible"
        append-to-body
      >
        <el-button @click="addMainParamsHandle">添加分组</el-button>
        <el-form :model="paramsDoMains" ref="dynamicValdateForm">
          <el-form-item
            v-for="(item, index) in paramsDoMains.domains"
            :key="index"
            label="规格参数"
          >
            <el-input v-model="item.value" style="width: 85%"></el-input>
            <el-button @click="delMainParamsHandle(index)">删除分组</el-button>
            <el-button @click="addChildParamsHandle(index)">添加参数</el-button>
            <div
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
            >
              <el-input
                v-model="childItem.childValue"
                style="width: 60%; margin-left: 80px"
              ></el-input>
              <el-button @click="delChildParamsHandle(index, childIndex)"
                >删除参数</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogParamsAddVisible = false">取 消</el-button>
          <el-button type="primary" @click="finishAddParamsHandle"
            >确定添加</el-button
          >
        </div>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogParamsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParamsHandle"
          >确定添加规格参数</el-button
        >
      </span>
    </el-dialog>
    <!-- <ParmasPagination /> -->
    <PubPagination :getPage="getPage()" />
  </div>
</template>

<script>
import api from "@/api";
import PubSearchHead from "../components/PubSearchHead.vue";
import PubTree from "../components/PubTree.vue";
// import ParmasPagination from "./Product/ParmasPagination.vue";
import PubPagination from "../components/PubPagination.vue";
export default {
  components: { PubSearchHead, PubTree, PubPagination },
  data() {
    return {
      tableData: [],
      page: 0,
      dialogParamsVisible: false,
      dialogParamsAddVisible: false,
      treeData: {},
      paramsDoMains: {
        domains: [
          {
            value: "",
            children: [
              {
                childValue: "",
                value: "",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.http(1);
    // 模糊查询
    this.$bus.$on("onSearch", (search) => {
      api
        .paramsSearch({ search: search })
        .then((res) => {
          this.tableData = res.data.result.reverse();
        })
        .catch((error) => {
          console.log(error);
        });
    });
    /**
     * 规格参数显示隐藏
     */
    this.$bus.$on("onAddDialog", (flag) => {
      this.dialogParamsVisible = flag;
    });
    /**
     * 页面切换时请求后台数据
     */
    this.$bus.$on("onPage", (val) => {
      this.http(val);
    });
  },
  methods: {
    getPage() {
      api.paramsTotal().then((res) => {
        this.page = res.data.result[0]["count(*)"];
      });
      return this.page
    },
    http(page) {
      api.selectItemParamAll({ page }).then((res) => {
        if (res.data.status === 200) {
          this.tableData = res.data.result;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getTreeData(data) {
      this.treeData = data;
    },
    addParamsHandle() {
      this.dialogParamsAddVisible = true;
    },
    /**
     * 添加规格参数主结构
     */
    addMainParamsHandle() {
      this.paramsDoMains.domains.push({
        value: "",
        children: [
          {
            childValue: "",
            value: "",
          },
        ],
      });
    },
    /**
     * 删除规格参数主结构
     */
    delMainParamsHandle(index) {
      this.paramsDoMains.domains.splice(index, 1);
    },
    /**
     * 添加规格参数子结构
     */
    addChildParamsHandle(index) {
      this.paramsDoMains.domains[index].children.push({
        childValue: "",
        value: "",
      });
    },
    /**
     * 删除规格参数子结构
     */
    delChildParamsHandle(index, childIndex) {
      this.paramsDoMains.domains[index].children.splice(childIndex, 1);
    },
    /**
     * 添加规格参数完整信息
     */
    finishAddParamsHandle() {
      api
        .insertItemParam({
          itemCatId: this.treeData.cid,
          content: JSON.stringify(this.paramsDoMains.domains),
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.dialogParamsVisible = false;
            this.dialogParamsAddVisible = false;
            this.http(1);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**
     * 删除规格参数数据
     */
    handleParamsDelete(index, row) {
      api
        .deleteParams({ id: row.id })
        .then((res) => {
          if (res.data.status === 200) {
            this.http(1);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>